import React, { useMemo } from 'react';

import { defaultsDeep } from 'lodash-es';

import type { WithCustomLegendComponentProps } from '@/components/chart/withCustomLegend';
import { withCustomLegend } from '@/components/chart/withCustomLegend';

import { px } from '@/utils';

import Chart, { ChartOption, ChartProps } from '../index';

export type RingProps = ChartProps & WithCustomLegendComponentProps;

const Ring: React.FC<RingProps> = ({ option: propsOption, data, ...rest }) => {
  const option: ChartOption = useMemo(() => {
    const res: ChartOption = defaultsDeep({}, propsOption, {
      legend: {
        show: false
      },
      tooltip: {
        show: false
      },
      series: [
        {
          type: 'pie',
          data,
          radius: ['50%', '70%'],
          center: ['50%', '50%'],
          label: {
            show: false,
            position: 'center',
            formatter: '{name|{b}}\n{value|{d}}{unit|%}',
            rich: {
              name: {
                fontSize: px(11),
                color: '#fff',
                padding: [0, 0, px(2), 0]
              },
              value: {
                fontSize: px(36),
                fontFamily: 'DINCond-Regular',
                color: '#fff'
              },
              unit: {
                fontSize: px(14),
                color: '#fff',
                fontFamily: 'DINCond-Regular',
                padding: [px(11), 0, 0, px(3)]
              }
            }
          },
          emphasis: {
            label: {
              show: true
            }
          }
        }
      ]
    } as ChartOption);

    return res;
  }, [propsOption, data]);

  return <Chart option={option} {...rest} />;
};

export default withCustomLegend()(Ring);
